$(document).ready(function() {
    function fetchDataAndUpdate(globalName) {
        $.get(`http://127.0.0.1:5000/task7/marketName=${globalName}`).done(function (data) {
            var myeCharts = echarts.init(document.querySelector('.panel .sunburst'));
            
            // 数据处理部分
            const supermarketData = data; // 从服务器获取的数据
            
            // 将超市数据转换为 gaugeData 格式
            const gaugeData = [
                {
                    value: ((supermarketData.value / supermarketData.total) * 100).toFixed(2),
                    name: supermarketData.name,
                    title: {
                        offsetCenter: ['0%', '-20%'],
                        color: '#fff',
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '30%']
                    }
                }
            ];

            const option = {
                title: {
                    text: `${data.name}占总销售百分比`,
                    left: 'center',
                    top: '0px',
                    textStyle: {
                        fontSize: 15,
                        color: '#fff',
                        fontWeight: '1'
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            itemStyle: {
                                color: "#84C9F8",
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 15
                            }
                        },
                        splitLine: {
                            show: false,
                            distance: 0,
                            length: 10
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            distance: 40
                        },
                        data: gaugeData,
                        title: {
                            fontSize: 14
                        },
                        detail: {
                            width: 50,
                            height: 15,
                            fontSize: 14,
                            color: '#84C9F8',
                            borderColor: '#84C9F8',
                            borderRadius: 20,
                            borderWidth: 1,
                            formatter: '{value}%'
                        },
                    }
                ]
            };

            // 设置图表选项并更新图表
            myeCharts.setOption(option);
        });
    }

    // 初始加载数据
    fetchDataAndUpdate(window.globalName);

    // 当 globalName 变化时更新数据
    $(document).on('globalNameChanged', function(event, globalName) {
        fetchDataAndUpdate(globalName);
    });
});
